//日历封装
function HxChartCalendar(id, range, title) {
    this.id = id || '';
    if (typeof (range) == 'object') {
        this.range = range[0];
    } else {
        if (range.length == 6 && !range.match(/[/ ,.-]/g)) {
            this.range = range.substr(0, 4) + '-' + range.substr(4, 2);
        } else {
            this.range = range.replace(/[/ ,.]/g, '-');
        }
    }
    this.title = title || '';
    this.graphData = [[]];
    // series[0]使用的data,既日期
    this.list = getDateListFromRange(this.range);
    // 大中小字体,对应size为l,m,s
    this.fontSize = [24, 16, 12];
    this.titleFontSize = [30, 24, 18];

    this.option = {
        textStyle: {
            fontSize: this.fontSize[1]
        },
        // 如果开启动画,则showImg效果会有问题
        animation: false,
        // tooltip: {
        //     formatter: function (params) {
        //         console.log(params);
        //         if (params.data[1] > 0) {
        //             return params.data[1];
        //         } else {
        //             return;
        //         }
        //     }
        // },
        title: {
            text: this.title,
            left: 'center',
            textStyle: {
                fontSize: this.titleFontSize[1]
            }
        },
        calendar: {
            orient: 'vertical',
            yearLabel: {
                margin: 40,
                position: 'bottom',
                fontSize: this.titleFontSize[1]
            },
            monthLabel: {
                nameMap: 'cn',
                margin: 20
            },
            dayLabel: {
                firstDay: 1,
                nameMap: 'cn',
                margin: 10,
            },
            range: this.range,
            cellSize: [70, 70],
            top: 100,
            bottom: 100,
            left: '10%',
            right: '10%'
        },
        series: [
            // 使用heatmap是为了方便点击,seires[0]用来显示日历中的日期
            {
                type: 'heatmap',
                coordinateSystem: 'calendar',
                zlevel: 1,
                itemStyle: {
                    color: 'rgba(128, 128, 128, 0)'
                },
                label: {
                    show: true,
                    formatter: function (params) {
                        var d = echarts.number.parseDate(params.value[0]);
                        if (params.value[1] == 0) {
                            return d.getDate();
                        } else if (params.value[1] == 1) {
                            return d.getDate() + '\n{hr|}';
                        }
                    },
                    rich: {
                        hr: { //下划线
                            borderColor: 'black',
                            width: '100%',
                            borderWidth: 1,
                            height: 0,
                        }
                    },
                    color: '#000',
                },
                data: this.list
            },

            // 当日数据显示为红字,series[1]用来显示日期中的数据
            {
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: 1,
                itemStyle: {
                    color: 'rgba(128, 128, 128, 0)'
                },
                label: {
                    show: true,
                    formatter: function (params) {
                        return '\n\n\n' + (params.value[2] || '');
                    },
                    fontWeight: 700,
                    color: '#a00'
                },
                data: []
            },
            // // 背景色根据当日数据改变
            // {
            //     type: 'heatmap',
            //     coordinateSystem: 'calendar',
            //     data: this.graphData,
            // },

            // series[2]用来显示img
            {
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: 20,
                symbolOffset: [0, '80%'],
                data: []
            }
        ]
    };

}

HxChartCalendar.prototype = {
    constructor: HxChartCalendar,
    // 初始化图表
    init: function () {
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题并重载图表
    setTitle: function (text) {
        this.option.title.text = text;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set数值并重载图表,数值以时间戳毫秒格式显示在日历中
    putData: function (dateStr, value) {
        var time;
        if (typeof (dateStr) == 'string') {
            if (dateStr.length == 8 && !dateStr.match(/[,./-]/g)) {
                time = new Date(dateStr.slice(0, 4), parseInt(dateStr.slice(4, 6)) - 1, dateStr.slice(6, 8)).getTime();
            } else {
                time = new Date(dateStr.replace(/[, .-]/g, "/")).getTime();
            }
        } else {
            time = dateStr;
        }

        var _this = this;
        var flag = 0;
        // 如果该日期有数据,则更新该日期的数据
        this.option.series[1].data.forEach(function (v, index) {
            if (v.includes(time)) {
                _this.option.series[1].data[index] = [time, 0, value];
                flag = 1;
            }
        });
        // 如果该日期没有数据,则新增数据
        if (flag == 0) {
            this.option.series[1].data = this.option.series[1].data.concat([[time, 0, value]]);
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 清楚图表中的数据
    clearData: function () {
        this.option.series[1].data = [[]];
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set背景并重载图表
    setBackground: function (color) {
        this.option.backgroundColor = color;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set年月并重载图表
    setRange: function (range) {
        if (typeof (range) == 'object') {
            return "请出入yyyy-mm格式的字符串"
        }
        this.option.calendar.range = range;
        this.option.series[0].data = getDateListFromRange(range);
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题位置并重载图表
    setTitleLocation: function (x) {
        switch (x) {
            case 'l':
                this.option.title.left = 'left';
                break;
            case 'c':
                this.option.title.left = 'center';
                break;
            case 'r':
                this.option.title.left = 'right';
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 点击事件
    setCbClick: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        chart.on('click', function (params) {
            var date = new Date(params.value[0]);
            date = formatDate(date);
            // 把日期传给回调函数
            callback(date);
        });
    },
    // 鼠标悬停边框颜色改变
    setHoverBorder: function (color) {
        this.option.series[0].emphasis = {
            itemStyle: {
                borderColor: color,
                borderWidth: 5
            }
        };
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 点击后边框变色
    setClickBorder: function (color) {
        var _this = this;
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        chart.on('click', function (params) {
            // 先初始化所有数据,把以前点击过的数据清除掉
            _this.option.series[0].data.forEach(function (v, index) {
                if (v.value.includes(params.value[0])) {
                    // 修改这天的data中的itemStyle
                    _this.option.series[0].data[index].itemStyle = { borderColor: color, borderWidth: 5 };
                } else {
                    _this.option.series[0].data[index].itemStyle = {};
                }
            });
            chart.setOption(_this.option);
        });
    },
    // 点击后日期字体变色
    setClickColor: function (color) {
        var _this = this;
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        chart.on('click', function (params) {
            // 先初始化所有数据,把以前点击过的数据清除掉
            _this.option.series[0].data.forEach(function (v, index) {
                if (v.value.includes(params.value[0])) {
                    // 修改这天的data中的itemStyle
                    _this.option.series[0].data[index].label.color = color;
                } else {
                    _this.option.series[0].data[index].label = {};
                }
            });
            chart.setOption(_this.option);
        });
    },
    // 点击后日期字体粗细
    setClickFontWeight: function (fontWeight) {
        var _this = this;
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        chart.on('click', function (params) {
            // 先初始化所有数据,把以前点击过的数据清除掉
            _this.option.series[0].data.forEach(function (v, index) {
                if (v.value.includes(params.value[0])) {
                    // 修改这天的data中的itemStyle
                    _this.option.series[0].data[index].label.fontWeight = fontWeight;
                } else {
                    _this.option.series[0].data[index].label = {};
                }
            });
            chart.setOption(_this.option);
        });
    },
    // 点击加下划线
    setClickUnderline: function (color) {
        var _this = this;
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        this.option.series[0].label.rich.hr.borderColor = color;
        chart.on('click', function (params) {
            // 先初始化所有数据,把以前点击过的数据清除掉
            _this.option.series[0].data.forEach(function (v, index) {
                if (v.value.includes(params.value[0])) {
                    // 修改这天的data中的itemStyle
                    _this.option.series[0].data[index].value[1] = 1;
                } else {
                    _this.option.series[0].data[index].value[1] = 0;
                }
            });
            chart.setOption(_this.option);
        });
    },
    // 右键点击事件
    setContextmenu: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.contextmenu) {
            chart.on('contextmenu', function (params) {
                var date = new Date(params.value[0]);
                date = formatDate(date);
                callback(date);
            });
        } else {
            chart._$handlers.contextmenu[0].h = function (params) {
                var date = new Date(params.value[0]);
                date = formatDate(date);
                callback(date);
            };
        }
    },
    // 修改图表字体大小
    setSize: function (size) {
        switch (size) {
            case 'l':
                this.option.calendar.yearLabel.fontSize = this.titleFontSize[0];
                this.option.textStyle.fontSize = this.fontSize[0];
                this.option.title.textStyle.fontSize = this.titleFontSize[0];
                break;
            case 'm':
                this.option.calendar.yearLabel.fontSize = this.titleFontSize[1];
                this.option.textStyle.fontSize = this.fontSize[1];
                this.option.title.textStyle.fontSize = this.titleFontSize[1];
                break;
            case 's':
                this.option.calendar.yearLabel.fontSize = this.titleFontSize[2];
                this.option.textStyle.fontSize = this.fontSize[2];
                this.option.title.textStyle.fontSize = this.titleFontSize[2];
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 去除标题等文字
    trim: function () {
        this.option.calendar.yearLabel.show = false;
        this.option.title.show = false;
        this.option.calendar.monthLabel.show = false;
        this.option.calendar.top = 40;
        this.option.calendar.bottom = 1;
        this.option.calendar.left = 1;
        this.option.calendar.right = 1;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 显示日期上的图
    putImg: function (dateStr, image) {
        var time;
        if (typeof (dateStr) == 'string') {
            if (dateStr.length == 8 && !dateStr.match(/[,./-]/g)) {
                time = new Date(dateStr.slice(0, 4), parseInt(dateStr.slice(4, 6)) - 1, dateStr.slice(6, 8)).getTime();
            } else {
                time = new Date(dateStr.replace(/[, .-]/g, "/")).getTime();
            }
        } else {
            time = dateStr;
        }
        var symbol = 'image://' + image;
        var data = this.option.series[2].data;
        var flag = 0;
        data.forEach(function (value) {
            if (time == value.value[0]) {
                flag = 1;
            }
        });
        if (flag == 0) {
            data.push({ value: [time, 0], symbol: symbol });
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 隐藏日期上的图
    removeImg: function (dateStr) {
        var time;
        if (typeof (dateStr) == 'string') {
            if (dateStr.length == 8 && !dateStr.match(/[,./-]/g)) {
                time = new Date(dateStr.slice(0, 4), parseInt(dateStr.slice(4, 6)) - 1, dateStr.slice(6, 8)).getTime();
            } else {
                time = new Date(dateStr.replace(/[, .-]/g, "/")).getTime();
            }
        } else {
            time = dateStr;
        }
        var data = this.option.series[2].data;
        data.forEach(function (value, index) {
            if (time == value.value[0]) {
                data.splice(index, 1);
                return;
            }
        });
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    }
};

// 获取时间戳list
function createDateList(startTime, endTime) {
    var list = [];
    while (startTime < endTime) {
        list.push({ value: [startTime, 0], label: {}, itemStyle: {} });
        startTime += 3600 * 24 * 1000;
    }
    return list;
}

// 根据传入的range获取日期
function getDateListFromRange(range) {
    if (typeof (range) == 'string') {
        var year = range.split('-')[0];
        var startTime = new Date(year + '/01/01').getTime();
        var endTime = startTime + 3600 * 24 * 366 * 1000
        return createDateList(startTime, endTime);
    } else if (typeof (range) == 'object') {
        var startYear = range[0].split('-')[0];
        var endYear = range[1].split('-')[0];
        var startTime = new Date(startYear + '/01/01').getTime();
        var endTime = Date.parse(parseInt(endYear) + 1 + ' GMT +8');
        return createDateList(startTime, endTime);
    }
}

// 返回年月日
function formatDate(date) {
    var myyear = date.getFullYear();
    var mymonth = date.getMonth() + 1;
    var myweekday = date.getDate();
    if (mymonth < 10) {
        mymonth = "0" + mymonth;
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday;
    }
    return (myyear + "-" + mymonth + "-" + myweekday);
}

function getDateFromStr(dateStr, separator) {
    if (!separator) {
        separator = "-";
    }
    var dateArr = dateStr.split(separator);
    var year = parseInt(dateArr[0]);
    var month;
    //处理月份为04这样的情况
    if (dateArr[1].indexOf("0") == 0) {
        month = parseInt(dateArr[1].substring(1));
    } else {
        month = parseInt(dateArr[1]);
    }
    var day = parseInt(dateArr[2]);
    var date = new Date(year, month - 1, day);
    return date;
}

// 日历的点击事件
function calendarClickFunc(params, callback, _this) {
    // 先初始化所有数据,把以前点击过的数据清除掉
    _this.option.series[0].data = getDateListFromRange(_this.range);
    _this.option.series[0].data.forEach(function (v, index) {
        if (v.value.includes(params.value[0])) {
            // 点击日期变为红色,修改这天的data中的label和itemStyle
            var listValue = _this.option.series[0].data[index];
            _this.option.series[0].data[index] = {
                value: listValue,
                label: {
                    color: 'red',
                    fontWeight: 900,
                    fontSize: 18
                },
                itemStyle: {
                    borderColor: '#409EFF',
                    borderWidth: 5,
                }
            };
        }
    });
    var date = new Date(params.value[0]);
    date = formatDate(date);
    // 把日期传给回调函数
    callback(date);
}

// 折线图封装
function HxChartLine(id, category, title) {
    this.id = id;
    this.category = category;
    this.title = title || '';
    this.series = [];
    // 大中小字体,对应size为l,m,s
    this.fontSize = [24, 16, 12];
    this.titleFontSize = [30, 24, 18];

    this.option = {
        title: {
            text: this.title,
            left: 'center',
            textStyle: {}
        },
        textStyle: {},
        tooltip: {
            trigger: 'axis',
            textStyle: {}
        },
        legend: {
            bottom: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: 50,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.category,
            axisLabel: {}
        },
        yAxis: {
            type: 'value',
            axisLabel: {}
        },
        series: this.series
    };
}

HxChartLine.prototype = {
    constructor: HxChartLine,
    init: function () {
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题并重载图表
    setTitle: function (text) {
        this.option.title.text = text;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题位置并重载图表
    setTitleLocation: function (x) {
        switch (x) {
            case 'l':
                this.option.title.left = 'left';
                break;
            case 'c':
                this.option.title.left = 'center';
                break;
            case 'r':
                this.option.title.left = 'right';
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 点击事件
    setCbClick: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.click) {
            chart.on('click', function (param) {
                callback([param.name, param.value]);
            });
        } else {
            chart._$handlers.click[0].h = function (param) {
                callback([param.name, param.value]);
            };
        }
    },
    // 右键点击事件
    setContextmenu: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.contextmenu) {
            chart.on('contextmenu', function (param) {
                callback(param);
            });
        } else {
            chart._$handlers.contextmenu[0].h = function (param) {
                callback(param);
            };
        }
    },
    // 新增修改数据
    putData: function (name, value) {
        // 判断是否已经有这个类目
        var flag = 0;
        for (var j = 0; j < this.option.series.length; j++) {
            if (name == this.option.series[j].name) {
                this.option.series[j].data = this.option.series[j].data.concat([value]);
                flag = 1;
            }
        }
        // 若没有这个类目,则新增类目
        if (flag == 0) {
            this.option.series.push({
                name: name,
                type: 'line',
                data: [value]
            });
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 新增x轴数据
    addX: function (data) {
        this.option.xAxis.data = this.option.xAxis.data.concat([data]);
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 清空数据
    clearData: function () {
        for (var i = 0; i < this.option.series.length; i++) {
            this.option.series[i].data = [];
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 显示每条线的极值
    showExtreme: function () {
        for (var i = 0; i < this.option.series.length; i++) {
            this.option.series[i].markPoint = {
                data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' }
                ]
            };
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 显示每条线的均线
    showAvarage: function () {
        for (var i = 0; i < this.option.series.length; i++) {
            this.option.series[i].markLine = {
                data: [
                    { type: 'average', name: '平均值' }
                ]
            }
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 修改图表字体大小
    setSize: function (size) {
        switch (size) {
            case 'l':
                this.option.xAxis.axisLabel.fontSize = this.fontSize[0];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[0];
                this.option.textStyle.fontSize = this.fontSize[0];
                this.option.tooltip.textStyle.fontSize = this.fontSize[0];
                this.option.title.textStyle.fontSize = this.titleFontSize[0];
                break;
            case 'm':
                this.option.xAxis.axisLabel.fontSize = this.fontSize[1];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[1];
                this.option.textStyle.fontSize = this.fontSize[1];
                this.option.tooltip.textStyle.fontSize = this.fontSize[1];
                this.option.title.textStyle.fontSize = this.titleFontSize[1];
                break;
            case 's':
                this.option.xAxis.axisLabel.fontSize = this.fontSize[2];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[2];
                this.option.textStyle.fontSize = this.fontSize[2];
                this.option.tooltip.textStyle.fontSize = this.fontSize[2];
                this.option.title.textStyle.fontSize = this.titleFontSize[2];
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set背景并重载图表
    setBackground: function (color) {
        this.option.backgroundColor = color;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 去除标题等文字
    trim: function () {
        this.option.title.show = false;
        this.option.legend.show = false;
        this.option.grid.top = 10;
        this.option.grid.bottom = 1;
        this.option.grid.left = 1;
        this.option.grid.right = 20;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    }
};

// 柱状图封装
function HxChartBar(id, category, title) {
    this.id = id;
    this.category = category || [];
    this.title = title || '';
    this.series = [];
    // 大中小字体,对应size为l,m,s
    this.fontSize = [24, 16, 12];
    this.titleFontSize = [30, 24, 18];

    this.option = {
        title: {
            text: this.title,
            left: 'center',
            textStyle: {}
        },
        textStyle: {},
        tooltip: {
            trigger: 'axis',
            textStyle: {}
        },
        legend: {
            bottom: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: 50,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: this.category,
            axisLabel: {}
        },
        yAxis: {
            type: 'value',
            axisLabel: {}
        },
        series: this.series
    };
}

HxChartBar.prototype = {
    constructor: HxChartBar,
    init: function () {
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题并重载图表
    setTitle: function (text) {
        this.option.title.text = text;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题位置并重载图表
    setTitleLocation: function (x) {
        switch (x) {
            case 'l':
                this.option.title.left = 'left';
                break;
            case 'c':
                this.option.title.left = 'center';
                break;
            case 'r':
                this.option.title.left = 'right';
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 点击事件
    setCbClick: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.click) {
            chart.on('click', function (param) {
                callback([param.name, param.value]);
            });
        } else {
            chart._$handlers.click[0].h = function (param) {
                callback([param.name, param.value]);
            };
        }
    },
    // 右键点击事件
    setContextmenu: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.contextmenu) {
            chart.on('contextmenu', function (param) {
                callback(param);
            });
        } else {
            chart._$handlers.contextmenu[0].h = function (param) {
                callback(param);
            };
        }
    },
    // 新增修改数据
    putData: function (name, x, y) {
        if (!this.option.xAxis.data.includes(x)) {
            this.option.xAxis.data.push(x);
        }
        // 判断是否已经有这个类目
        var flag = 0;
        for (var j = 0; j < this.option.series.length; j++) {
            if (name == this.option.series[j].name) {
                this.option.series[j].data = this.option.series[j].data.concat([[x, y]]);
                flag = 1;
            }
        }
        // 若没有这个类目,则新增类目
        if (flag == 0) {
            this.option.series.push({
                name: name,
                type: 'bar',
                data: [[x, y]]
            });
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 新增x轴数据
    addX: function (data) {
        this.option.xAxis.data = this.option.xAxis.data.concat([data]);
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 清空数据
    clearData: function () {
        for (var i = 0; i < this.option.series.length; i++) {
            this.option.series[i].data = [];
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 显示每条线的极值
    showExtreme: function () {
        for (var i = 0; i < this.option.series.length; i++) {
            this.option.series[i].markPoint = {
                data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' }
                ]
            }
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 显示每条线的均线
    showAvarage: function () {
        for (var i = 0; i < this.option.series.length; i++) {
            this.option.series[i].markLine = {
                data: [
                    { type: 'average', name: '平均值' }
                ]
            };
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 修改图表字体大小
    setSize: function (size) {
        switch (size) {
            case 'l':
                this.option.xAxis.axisLabel.fontSize = this.fontSize[0];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[0];
                this.option.textStyle.fontSize = this.fontSize[0];
                this.option.tooltip.textStyle.fontSize = this.fontSize[0];
                this.option.title.textStyle.fontSize = this.titleFontSize[0];
                break;
            case 'm':
                this.option.xAxis.axisLabel.fontSize = this.fontSize[1];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[1];
                this.option.textStyle.fontSize = this.fontSize[1];
                this.option.tooltip.textStyle.fontSize = this.fontSize[1];
                this.option.title.textStyle.fontSize = this.titleFontSize[1];
                break;
            case 's':
                this.option.xAxis.axisLabel.fontSize = this.fontSize[2];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[2];
                this.option.textStyle.fontSize = this.fontSize[2];
                this.option.tooltip.textStyle.fontSize = this.fontSize[2];
                this.option.title.textStyle.fontSize = this.titleFontSize[2];
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set背景并重载图表
    setBackground: function (color) {
        this.option.backgroundColor = color;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 去除标题等文字
    trim: function () {
        this.option.title.show = false;
        this.option.legend.show = false;
        this.option.grid.top = 10;
        this.option.grid.bottom = 1;
        this.option.grid.left = 1;
        this.option.grid.right = 20;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    }
};

// 饼状图封装
function HxChartPie(id, title) {
    // 大中小字体,对应size为l,m,s
    this.fontSize = [24, 16, 12];
    this.titleFontSize = [30, 24, 18];
    this.id = id;
    this.data = [];
    this.radius = [0, '70%'];
    this.circular = ['55%', '70%'];
    this.title = title || '';
    this.option = {
        title: {
            text: this.title,
            left: 'center',
            textStyle: {}
        },
        textStyle: {},
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            textStyle: {}
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            top: '10%'
        },
        series: {
            type: 'pie',
            radius: this.radius,
            data: this.data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    }
}
HxChartPie.prototype = {
    constructor: HxChartPie,
    init: function () {
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 点击回调
    setCbClick: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.click) {
            chart.on('click', function (param) {
                callback([param.data.name, param.data.value]);
            });
        } else {
            chart._$handlers.click[0].h = function (param) {
                callback([param.data.name, param.data.value]);
            };
        }
    },
    // 右键点击事件
    setContextmenu: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.contextmenu) {
            chart.on('contextmenu', function (param) {
                callback(param);
            });
        } else {
            chart._$handlers.contextmenu[0].h = function (param) {
                callback(param);
            };
        }
    },
    // set标题并重载图表
    setTitle: function (text) {
        this.option.title.text = text;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题位置并重载图表
    setTitleLocation: function (x) {
        switch (x) {
            case 'l':
                this.option.title.left = 'left';
                break;
            case 'c':
                this.option.title.left = 'center';
                break;
            case 'r':
                this.option.title.left = 'right';
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 新增修改数据
    putData: function (name, value) {
        var flag = 0;
        for (var j = 0; j < this.option.series.data.length; j++) {
            if (name == this.option.series.data[j].name) {
                this.option.series.data[j].value = value;
                flag = 1;
            }
        }
        if (flag == 0) {
            this.option.series.data = this.option.series.data.concat({ name: name, value: value });
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 清空数据
    clearData: function () {
        this.option.series.data = [];
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 变成圆环
    setCircular: function () {
        this.option.series.radius = this.circular;
        this.option.series.label = {
            show: false,
            position: 'center',
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        };
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 修改图表字体大小
    setSize: function (size) {
        switch (size) {
            case 'l':
                this.option.textStyle.fontSize = this.fontSize[0];
                this.option.tooltip.textStyle.fontSize = this.fontSize[0];
                this.option.title.textStyle.fontSize = this.titleFontSize[0];
                if (this.option.series.label) {
                    this.option.series.label.emphasis.textStyle.fontSize = this.titleFontSize[0];
                }
                break;
            case 'm':
                this.option.textStyle.fontSize = this.fontSize[1];
                this.option.tooltip.textStyle.fontSize = this.fontSize[1];
                this.option.title.textStyle.fontSize = this.titleFontSize[1];
                if (this.option.series.label) {
                    this.option.series.label.emphasis.textStyle.fontSize = this.titleFontSize[1];
                }
                break;
            case 's':
                this.option.textStyle.fontSize = this.fontSize[2];
                this.option.tooltip.textStyle.fontSize = this.fontSize[2];
                this.option.title.textStyle.fontSize = this.titleFontSize[2];
                if (this.option.series.label) {
                    this.option.series.label.emphasis.textStyle.fontSize = this.titleFontSize[2];
                }
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set背景并重载图表
    setBackground: function (color) {
        this.option.backgroundColor = color;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 去除标题等文字
    trim: function () {
        this.option.title.show = false;
        this.option.series.radius = [0, '95%'];
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    }
};

// 双饼状图封装
function HxChartDoublePie(id, title) {
    // 大中小字体,对应size为l,m,s
    this.fontSize = [24, 16, 12];
    this.titleFontSize = [30, 24, 18];
    this.id = id;
    this.data = [];
    this.radius = [0, '50%'];
    this.circular = ['55%', '70%'];
    this.title = title || '';
    this.option = {
        title: {
            text: this.title,
            left: 'center',
            textStyle: {}
        },
        textStyle: {},
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            textStyle: {}
        },
        legend: {
            bottom: 0,
        },
        series: [
            {
                type: 'pie',
                radius: this.radius,
                center: ['25%', '50%'],
                data: this.data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            {
                type: 'pie',
                radius: this.radius,
                center: ['75%', '50%'],
                data: this.data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
}
HxChartDoublePie.prototype = {
    constructor: HxChartPie,
    init: function () {
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 点击回调
    setCbClick: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.click) {
            chart.on('click', function (param) {
                callback([param.data.name, param.data.value]);
            });
        } else {
            chart._$handlers.click[0].h = function (param) {
                callback([param.data.name, param.data.value]);
            };
        }
    },
    // 右键点击事件
    setContextmenu: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.contextmenu) {
            chart.on('contextmenu', function (param) {
                callback(param);
            });
        } else {
            chart._$handlers.contextmenu[0].h = function (param) {
                callback(param);
            };
        }
    },
    // set标题并重载图表
    setTitle: function (text) {
        this.option.title.text = text;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题位置并重载图表
    setTitleLocation: function (x) {
        switch (x) {
            case 'l':
                this.option.title.left = 'left';
                break;
            case 'c':
                this.option.title.left = 'center';
                break;
            case 'r':
                this.option.title.left = 'right';
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 新增修改左侧数据
    putDataLeft: function (name, value) {
        var flag = 0;
        for (var j = 0; j < this.option.series[0].data.length; j++) {
            if (name == this.option.series[0].data[j].name) {
                this.option.series[0].data[j].value = value;
                flag = 1;
            }
        }
        if (flag == 0) {
            this.option.series[0].data = this.option.series[0].data.concat({ name: name, value: value });
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 新增修改左侧数据
    putDataRight: function (name, value) {
        var flag = 0;
        for (var j = 0; j < this.option.series[1].data.length; j++) {
            if (name == this.option.series[1].data[j].name) {
                this.option.series[1].data[j].value = value;
                flag = 1;
            }
        }
        if (flag == 0) {
            this.option.series[1].data = this.option.series[1].data.concat({ name: name, value: value });
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 清空数据
    clearData: function () {
        this.option.series[0].data = [];
        this.option.series[1].data = [];
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 变成圆环
    setCircular: function () {
        this.option.series[0].radius = this.circular;
        this.option.series[0].label = {
            show: false,
            position: 'center',
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        };

        this.option.series[1].radius = this.circular;
        this.option.series[1].label = {
            show: false,
            position: 'center',
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        };
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 修改图表字体大小
    setSize: function (size) {
        switch (size) {
            case 'l':
                this.option.textStyle.fontSize = this.fontSize[0];
                this.option.tooltip.textStyle.fontSize = this.fontSize[0];
                this.option.title.textStyle.fontSize = this.titleFontSize[0];
                if (this.option.series[0].label) {
                    this.option.series[0].label.emphasis.textStyle.fontSize = this.titleFontSize[0];
                    this.option.series[1].label.emphasis.textStyle.fontSize = this.titleFontSize[0];
                }
                break;
            case 'm':
                this.option.textStyle.fontSize = this.fontSize[1];
                this.option.tooltip.textStyle.fontSize = this.fontSize[1];
                this.option.title.textStyle.fontSize = this.titleFontSize[1];
                if (this.option.series[0].label) {
                    this.option.series[0].label.emphasis.textStyle.fontSize = this.titleFontSize[1];
                    this.option.series[1].label.emphasis.textStyle.fontSize = this.titleFontSize[1];
                }
                break;
            case 's':
                this.option.textStyle.fontSize = this.fontSize[2];
                this.option.tooltip.textStyle.fontSize = this.fontSize[2];
                this.option.title.textStyle.fontSize = this.titleFontSize[2];
                if (this.option.series[0].label) {
                    this.option.series[0].label.emphasis.textStyle.fontSize = this.titleFontSize[2];
                    this.option.series[1].label.emphasis.textStyle.fontSize = this.titleFontSize[2];
                }
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set背景并重载图表
    setBackground: function (color) {
        this.option.backgroundColor = color;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 去除标题等文字
    trim: function () {
        this.option.title.show = false;
        this.option.series.radius = [0, '95%'];
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    }
};


// 气泡图封装
function HxChartScatter(id, title) {
    // 大中小字体,对应size为l,m,s
    this.fontSize = [24, 16, 12];
    this.titleFontSize = [30, 24, 18];
    this.symbolSize = [50, 40, 30];
    this.id = id;
    this.title = title || '';
    this.series = [];
    this.option = {
        title: {
            text: this.title,
            left: 'center',
            textStyle: {}
        },
        grid: {},
        textStyle: {},
        tooltip: {
            textStyle: {},
            formatter: function (params) {
                return '横轴:' + params.value[0] + ',纵轴:' + params.value[1] + ',值:' + params.value[2]
            }
        },
        legend: {
            right: 10,
        },
        xAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLabel: {}
        },
        yAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            scale: true,
            axisLabel: {}
        },
        series: this.series
    };
}

HxChartScatter.prototype = {
    constructor: HxChartScatter,
    init: function () {
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题并重载图表
    setTitle: function (text) {
        this.option.title.text = text;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题位置并重载图表
    setTitleLocation: function (x) {
        switch (x) {
            case 'l':
                this.option.title.left = 'left';
                break;
            case 'c':
                this.option.title.left = 'center';
                break;
            case 'r':
                this.option.title.left = 'right';
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 点击事件
    setCbClick: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.click) {
            chart.on('click', function (param) {
                callback(param.value.concat([param.seriesName]));
            });
        } else {
            chart._$handlers.click[0].h = function (param) {
                callback(param.value.concat([param.seriesName]));
            };
        }
    },
    // 右键点击事件
    setContextmenu: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.contextmenu) {
            chart.on('contextmenu', function (param) {
                callback(param);
            });
        } else {
            chart._$handlers.contextmenu[0].h = function (param) {
                callback(param);
            };
        }
    },
    // 新增修改数据
    putData: function (name, x, y, value, label) {
        var flag = 0;
        for (var j = 0; j < this.option.series.length; j++) {
            if (name == this.option.series[j].name) {
                this.option.series[j].data = this.option.series[j].data.concat([[x, y, value, label]]);
                flag = 1;
            }
        }
        if (flag == 0) {
            this.option.series.push({
                name: name,
                data: [[x, y, value, label]],
                type: 'scatter',
                symbolSize: 50,
                label: {
                    emphasis: {
                        show: true,
                        formatter: function (param) {
                            return param.value[3];
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(120, 36, 50, 0.5)',
                        shadowOffsetY: 5,
                        // color: createRandomRGB()
                    }
                }
            });
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 清空数据
    clearData: function () {
        for (var i = 0; i < this.option.series.length; i++) {
            this.option.series[i].data = [];
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 修改影响图形大小的最大值
    setCompareNum: function (compareNum) {
        for (var i = 0; i < this.option.series.length; i++) {
            this.option.series[i].symbolSize = function (data) {
                return data[2] / compareNum * 50 > 50 ? 50 : data[2] / compareNum * 50;
            };
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 修改图表字体大小
    setSize: function (size) {
        switch (size) {
            case 'l':
                this.option.xAxis.axisLabel.fontSize = this.fontSize[0];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[0];
                this.option.textStyle.fontSize = this.fontSize[0];
                this.option.tooltip.textStyle.fontSize = this.fontSize[0];
                this.option.title.textStyle.fontSize = this.titleFontSize[0];
                for (var i = 0; i < this.option.series.length; i++) {
                    this.option.series[i].label.emphasis.fontSize = this.fontSize[0];
                    this.option.series[i].symbolSize = this.symbolSize[0];
                }
                break;
            case 'm':
                this.option.xAxis.axisLabel.fontSize = this.fontSize[1];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[1];
                this.option.textStyle.fontSize = this.fontSize[1];
                this.option.tooltip.textStyle.fontSize = this.fontSize[1];
                this.option.title.textStyle.fontSize = this.titleFontSize[1];
                for (var i = 0; i < this.option.series.length; i++) {
                    this.option.series[i].label.emphasis.fontSize = this.fontSize[1];
                    this.option.series[i].symbolSize = this.symbolSize[1];
                }
                break;
            case 's':
                this.option.xAxis.axisLabel.fontSize = this.fontSize[2];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[2];
                this.option.textStyle.fontSize = this.fontSize[2];
                this.option.tooltip.textStyle.fontSize = this.fontSize[2];
                this.option.title.textStyle.fontSize = this.titleFontSize[2];
                for (var i = 0; i < this.option.series.length; i++) {
                    this.option.series[i].label.emphasis.fontSize = this.fontSize[2];
                    this.option.series[i].symbolSize = this.symbolSize[2];
                }
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set背景并重载图表
    setBackground: function (color) {
        this.option.backgroundColor = color;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 去除标题等文字
    trim: function () {
        this.option.title.show = false;
        this.option.legend.show = false;
        this.option.grid.top = 10;
        this.option.grid.bottom = 40;
        this.option.grid.left = 40;
        this.option.grid.right = 20;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    }
};

// 随机生成rgb颜色字符串
function createRandomRGB() {
    return 'rgb(' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ')';
}

// 雷达图封装
function HxChartRadar(id, indicator, title) {
    // 大中小字体,对应size为l,m,s
    this.fontSize = [24, 16, 12];
    this.titleFontSize = [30, 24, 18];
    this.id = id;
    this.title = title || '';
    this.indicator = indicator;
    this.series = {
        type: 'radar',
        data: []
    };
    this.option = {
        title: {
            text: this.title,
            left: 'center',
            textStyle: {}
        },
        textStyle: {},
        tooltip: {
            textStyle: {}
        },
        legend: {
            bottom: 0
        },
        radar: {
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: this.indicator
        },
        series: this.series
    };
}

HxChartRadar.prototype = {
    constructor: HxChartRadar,
    init: function () {
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题并重载图表
    setTitle: function (text) {
        this.option.title.text = text;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题位置并重载图表
    setTitleLocation: function (x) {
        switch (x) {
            case 'l':
                this.option.title.left = 'left';
                break;
            case 'c':
                this.option.title.left = 'center';
                break;
            case 'r':
                this.option.title.left = 'right';
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 点击事件
    setCbClick: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.click) {
            chart.on('click', function (param) {
                callback(param.value.concat([param.name]));
            });
        } else {
            chart._$handlers.click[0].h = function (param) {
                callback(param.value.concat([param.name]));
            };
        }
    },
    // 右键点击事件
    setContextmenu: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.contextmenu) {
            chart.on('contextmenu', function (param) {
                callback(param);
            });
        } else {
            chart._$handlers.contextmenu[0].h = function (param) {
                callback(param);
            };
        }
    },
    // 修改图表字体大小
    setSize: function (size) {
        switch (size) {
            case 'l':
                this.option.textStyle.fontSize = this.fontSize[0];
                this.option.tooltip.textStyle.fontSize = this.fontSize[0];
                this.option.title.textStyle.fontSize = this.titleFontSize[0];
                break;
            case 'm':
                this.option.textStyle.fontSize = this.fontSize[1];
                this.option.tooltip.textStyle.fontSize = this.fontSize[1];
                this.option.title.textStyle.fontSize = this.titleFontSize[1];
                break;
            case 's':
                this.option.textStyle.fontSize = this.fontSize[2];
                this.option.tooltip.textStyle.fontSize = this.fontSize[2];
                this.option.title.textStyle.fontSize = this.titleFontSize[2];
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set背景并重载图表
    setBackground: function (color) {
        this.option.backgroundColor = color;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 新增修改数据
    putData: function (name, value1, value2, value3, value4, value5, value6) {
        var flag = 0;
        for (var j = 0; j < this.option.series.data.length; j++) {
            if (name == this.option.series.data[j].name) {
                this.option.series.data[j].value = [value1, value2, value3, value4, value5, value6];
                flag = 1;
            }
        }
        if (flag == 0) {
            this.option.series.data = this.option.series.data.concat({ name: name, value: [value1, value2, value3, value4, value5, value6] });
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 清空数据
    clearData: function () {
        this.option.series.data = [];
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 去除标题等文字
    trim: function () {
        this.option.title.show = false;
        // this.option.legend.show = false;
        this.option.radar.radius = '90%';
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    }
};

// 仪表盘封装
function HxChartGauge(id, min, max, title) {
    // 大中小字体,对应size为l,m,s
    this.fontSize = [24, 16, 12];
    this.titleFontSize = [30, 24, 18];
    this.id = id;
    this.title = title || '';
    this.series = {
        name: '',
        type: 'gauge',
        title: {},
        detail: {},
        min: min,
        max: max,
        data: [],
        axisLine: {
            lineStyle: {
                color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
            }
        }
    };
    this.option = {
        title: {
            text: this.title,
            left: 'center',
            textStyle: {}
        },
        textStyle: {},
        tooltip: {
            textStyle: {},
            formatter: "{b}:{c}"
        },
        series: this.series
    };
}

HxChartGauge.prototype = {
    constructor: HxChartGauge,
    init: function () {
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题并重载图表
    setTitle: function (text) {
        this.option.title.text = text;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题位置并重载图表
    setTitleLocation: function (x) {
        switch (x) {
            case 'l':
                this.option.title.left = 'left';
                break;
            case 'c':
                this.option.title.left = 'center';
                break;
            case 'r':
                this.option.title.left = 'right';
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 修改图表字体大小
    setSize: function (size) {
        switch (size) {
            case 'l':
                this.option.textStyle.fontSize = this.fontSize[0];
                this.option.series.title.fontSize = this.fontSize[0];
                this.option.series.detail.fontSize = this.titleFontSize[0];
                this.option.tooltip.textStyle.fontSize = this.fontSize[0];
                this.option.title.textStyle.fontSize = this.titleFontSize[0];
                break;
            case 'm':
                this.option.textStyle.fontSize = this.fontSize[1];
                this.option.series.title.fontSize = this.fontSize[1];
                this.option.series.detail.fontSize = this.titleFontSize[1];
                this.option.tooltip.textStyle.fontSize = this.fontSize[1];
                this.option.title.textStyle.fontSize = this.titleFontSize[1];
                break;
            case 's':
                this.option.textStyle.fontSize = this.fontSize[2];
                this.option.series.title.fontSize = this.fontSize[2];
                this.option.series.detail.fontSize = this.titleFontSize[2];
                this.option.tooltip.textStyle.fontSize = this.fontSize[2];
                this.option.title.textStyle.fontSize = this.titleFontSize[2];
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set背景并重载图表
    setBackground: function (color) {
        this.option.backgroundColor = color;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 点击事件
    setCbClick: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.click) {
            chart.on('click', function (param) {
                callback([param.name, param.value]);
            });
        } else {
            chart._$handlers.click[0].h = function (param) {
                callback([param.name, param.value]);
            };
        }
    },
    // 右键点击事件
    setContextmenu: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.contextmenu) {
            chart.on('contextmenu', function (param) {
                callback(param);
            });
        } else {
            chart._$handlers.contextmenu[0].h = function (param) {
                callback(param);
            };
        }
    },
    // 新增修改数据
    putData: function (name, value) {
        this.option.series.name = name;
        this.option.series.data = [value];
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 清空数据
    clearData: function () {
        this.option.series.data = [];
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 去除标题等文字
    trim: function () {
        this.option.title.show = false;
        this.option.series.radius = '100%';
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 修改仪表盘颜色
    changeColor: function (color1, color2, color3) {
        this.option.series.axisLine.lineStyle.color[0][1] = color1;
        this.option.series.axisLine.lineStyle.color[1][1] = color2;
        this.option.series.axisLine.lineStyle.color[2][1] = color3;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    }
};


function HxChartMultiGauge(id, title) {
    // 大中小字体,对应size为l,m,s
    this.fontSize = [24, 16, 12];
    this.titleFontSize = [30, 24, 18];
    this.id = id;
    this.title = title || '';
    this.series = []
    this.option = {
        title: {
            text: this.title,
            left: 'center',
            textStyle: {}
        },
        textStyle: {},
        tooltip: {
            textStyle: {},
            formatter: "{b}:{c}"
        },
        series: this.series
    }
}

HxChartMultiGauge.prototype = {
    constructor: HxChartMultiGauge,
    init: function () {
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题并重载图表
    setTitle: function (text) {
        this.option.title.text = text;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题位置并重载图表
    setTitleLocation: function (x) {
        switch (x) {
            case 'l':
                this.option.title.left = 'left';
                break;
            case 'c':
                this.option.title.left = 'center';
                break;
            case 'r':
                this.option.title.left = 'right';
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 修改图表字体大小
    setSize: function (size) {
        switch (size) {
            case 'l':
                this.option.textStyle.fontSize = this.fontSize[0];
                this.option.tooltip.textStyle.fontSize = this.fontSize[0];
                this.option.title.textStyle.fontSize = this.titleFontSize[0];
                this.option.series[0].title.fontSize = this.fontSize[0];
                this.option.series[0].detail.fontSize = this.titleFontSize[0];
                this.option.series[1].title.fontSize = this.fontSize[0];
                this.option.series[1].detail.fontSize = this.titleFontSize[0];
                break;
            case 'm':
                this.option.textStyle.fontSize = this.fontSize[1];
                this.option.tooltip.textStyle.fontSize = this.fontSize[1];
                this.option.title.textStyle.fontSize = this.titleFontSize[1];
                this.option.series[0].title.fontSize = this.fontSize[1];
                this.option.series[0].detail.fontSize = this.titleFontSize[1];
                this.option.series[1].title.fontSize = this.fontSize[1];
                this.option.series[1].detail.fontSize = this.titleFontSize[1];
                break;
            case 's':
                this.option.textStyle.fontSize = this.fontSize[2];
                this.option.tooltip.textStyle.fontSize = this.fontSize[2];
                this.option.title.textStyle.fontSize = this.titleFontSize[2];
                this.option.series[0].title.fontSize = this.fontSize[2];
                this.option.series[0].detail.fontSize = this.titleFontSize[2];
                this.option.series[1].title.fontSize = this.fontSize[2];
                this.option.series[1].detail.fontSize = this.titleFontSize[2];
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set背景并重载图表
    setBackground: function (color) {
        this.option.backgroundColor = color;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 点击事件
    setCbClick: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.click) {
            chart.on('click', function (param) {
                callback([param.name, param.value]);
            });
        } else {
            chart._$handlers.click[0].h = function (param) {
                callback([param.name, param.value]);
            };
        }
    },
    // 右键点击事件
    setContextmenu: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.contextmenu) {
            chart.on('contextmenu', function (param) {
                callback(param);
            });
        } else {
            chart._$handlers.contextmenu[0].h = function (param) {
                callback(param);
            };
        }
    },
    // 新增修改数据
    putData: function (name, value, min, max) {
        var flag = 0;
        for (var j = 0; j < this.option.series.length; j++) {
            if (name == this.option.series[j].name) {
                flag = 1;
                this.option.series[j].data = [value];

            }
        }
        if (flag == 0 && this.option.series.length == 0) {
            this.option.series[0] = {
                name: name,
                type: 'gauge',
                z: 3,
                min: min,
                max: max,
                radius: '70%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 10,
                        color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                axisLabel: {
                    backgroundColor: 'auto',
                    borderRadius: 2,
                    color: '#eee',
                    padding: 3,
                    textShadowBlur: 2,
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 1,
                    textShadowColor: '#222'
                },
                title: {
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic'
                },
                detail: {
                    fontWeight: 'bolder',
                    borderRadius: 3,
                    backgroundColor: '#444',
                    borderColor: '#aaa',
                    shadowBlur: 5,
                    shadowColor: '#333',
                    shadowOffsetX: 0,
                    shadowOffsetY: 3,
                    borderWidth: 2,
                    textBorderColor: '#000',
                    textBorderWidth: 2,
                    textShadowBlur: 2,
                    textShadowColor: '#fff',
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 0,
                    fontFamily: 'Arial',
                    color: '#eee',
                },
                data: [value]
            };
        } else if (flag == 0 && this.option.series.length == 1) {
            this.option.series[1] = {
                name: name,
                type: 'gauge',
                center: ['20%', '55%'],    // 默认全局居中
                radius: '50%',
                min: min,
                max: max,
                endAngle: 45,
                splitNumber: 5,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8,
                        color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 5
                },
                title: {
                    offsetCenter: [0, '-30%'],       // x, y，单位px
                },
                detail: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder'
                },
                data: [value]
            };
        } else if (flag == 0 && this.option.series.length == 2) {
            var num = 0;
            this.option.series[2] = {
                name: name,
                type: 'gauge',
                center: ['77%', '50%'],    // 默认全局居中
                radius: '35%',
                min: min,
                max: max,
                startAngle: 135,
                endAngle: 45,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8,
                        color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    splitNumber: 5,
                    length: 10,        // 属性length控制线长
                    lineStyle: {        // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                axisLabel: {
                    formatter: function (v) {
                        num++;
                        if (num % 3 == 2) {
                            return name;
                        }
                        return v;
                    }
                },
                splitLine: {           // 分隔线
                    length: 15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 2
                },
                title: {
                    show: false
                },
                detail: {
                    show: false
                },
                data: [value]
            };
        } else if (flag == 0 && this.option.series.length == 3) {
            var num2 = 0;
            this.option.series[3] = {
                name: name,
                type: 'gauge',
                center: ['77%', '50%'],    // 默认全局居中
                radius: '35%',
                min: min,
                max: max,
                startAngle: 315,
                endAngle: 225,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8,
                        color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    show: false
                },
                axisLabel: {
                    formatter: function (v) {
                        num2++;
                        if (num2 % 3 == 2) {
                            return name;
                        }
                        return v;
                    }
                },
                splitLine: {           // 分隔线
                    length: 15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 2
                },
                title: {
                    show: false
                },
                detail: {
                    show: false
                },
                data: [value]
            };
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 清空数据
    clearData: function () {
        for (var i = 0; i < this.option.series.length; i++) {
            this.option.series[i].data = [];
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 去除标题等文字
    trim: function () {
        this.option.title.show = false;
        this.option.series[0].radius = '100%';
        this.option.series[1].center = ['15%', '55%'];
        this.option.series[1].radius = '60%';
        this.option.series[2].center = ['85%', '50%'];
        this.option.series[3].center = ['85%', '50%'];
        this.option.series[2].radius = '50%';
        this.option.series[3].radius = '50%';
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 修改仪表盘颜色
    changeColor: function (color1, color2, color3) {
        this.option.series.forEach(function (value) {
            value.axisLine.lineStyle.color[0][1] = color1;
            value.axisLine.lineStyle.color[1][1] = color2;
            value.axisLine.lineStyle.color[2][1] = color3;
        });
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    }
};

// 交错正负轴封装
function HxChartCrossBar(id, category, title) {
    // 大中小字体,对应size为l,m,s
    this.fontSize = [24, 16, 12];
    this.titleFontSize = [30, 24, 18];
    this.id = id;
    this.title = title || '';
    this.category = category;
    this.labelRight = {
        normal: {
            position: 'right'
        }
    };
    this.data = [];
    this.option = {
        title: {
            text: this.title,
            left: 'center',
            textStyle: {}
        },
        textStyle: {},
        tooltip: {
            trigger: 'axis',
            textStyle: {},
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top: 80,
            bottom: 30
        },
        xAxis: {
            type: 'value',
            position: 'top',
            splitLine: { lineStyle: { type: 'dashed' } },
            axisLabel: {}
        },
        yAxis: {
            type: 'category',
            axisLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            data: this.category
        },
        series: [{
            type: 'bar',
            label: {
                normal: {
                    show: true,
                    formatter: '{b}'
                }
            },
            data: this.data
        }]
    };
}

HxChartCrossBar.prototype = {
    constructor: HxChartCrossBar,
    init: function () {
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 点击回调
    setCbClick: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.click) {
            chart.on('click', function (param) {
                callback([param.name, param.value]);
            });
        } else {
            chart._$handlers.click[0].h = function (param) {
                callback([param.name, param.value]);
            };
        }
    },
    // 右键点击事件
    setContextmenu: function (callback) {
        var chart = echarts.init(document.getElementById(this.id), 'macarons');
        if (!chart._$handlers.contextmenu) {
            chart.on('contextmenu', function (param) {
                callback(param);
            });
        } else {
            chart._$handlers.contextmenu[0].h = function (param) {
                callback(param);
            };
        }
    },
    // set标题并重载图表
    setTitle: function (text) {
        this.option.title.text = text;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set标题位置并重载图表
    setTitleLocation: function (x) {
        switch (x) {
            case 'l':
                this.option.title.left = 'left';
                break;
            case 'c':
                this.option.title.left = 'center';
                break;
            case 'r':
                this.option.title.left = 'right';
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 修改图表字体大小
    setSize: function (size) {
        switch (size) {
            case 'l':
                this.option.textStyle.fontSize = this.fontSize[0];
                this.option.tooltip.textStyle.fontSize = this.fontSize[0];
                this.option.xAxis.axisLabel.fontSize = this.fontSize[0];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[0];
                this.option.title.textStyle.fontSize = this.titleFontSize[0];
                break;
            case 'm':
                this.option.textStyle.fontSize = this.fontSize[1];
                this.option.tooltip.textStyle.fontSize = this.fontSize[1];
                this.option.xAxis.axisLabel.fontSize = this.fontSize[1];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[1];
                this.option.title.textStyle.fontSize = this.titleFontSize[1];
                break;
            case 's':
                this.option.textStyle.fontSize = this.fontSize[2];
                this.option.tooltip.textStyle.fontSize = this.fontSize[2];
                this.option.xAxis.axisLabel.fontSize = this.fontSize[2];
                this.option.yAxis.axisLabel.fontSize = this.fontSize[2];
                this.option.title.textStyle.fontSize = this.titleFontSize[2];
                break;
        }
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // set背景并重载图表
    setBackground: function (color) {
        this.option.backgroundColor = color;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 新增修改数据
    putData: function (data) {
        var labelRight = {
            normal: {
                position: 'right'
            }
        };
        if (data < 0) {
            data = { value: data, label: labelRight };
        }
        var newData = this.option.series[0].data.concat([data]);
        if (newData.length <= this.option.yAxis.data.length) {
            this.option.series[0].data = newData;
            echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
        }
    },
    // 新增x轴数据
    addY: function (data) {
        this.option.yAxis.data = this.option.yAxis.data.concat([data]);
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 清空数据
    clearData: function () {
        this.option.series[0].data = [];
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    },
    // 去除标题等文字
    trim: function () {
        this.option.title.show = false;
        this.option.grid.top = 30;
        this.option.grid.bottom = 1;
        this.option.grid.left = 20;
        this.option.grid.right = 20;
        echarts.init(document.getElementById(this.id), 'macarons').setOption(this.option);
    }
};

var iconWork = '';

var iconTick = '';

var iconCross = '';

var iconFlag = '';